<script>
import storage from "@/utils/storage";

export default {
  props: {
    showUser: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  data() {
    return {
      show: false,
    };
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfoGetter;
    },
  },
  watch: {
    showUser: {
      handler() {
        this.show = this.showUser;
      },
    },
  },
  methods: {
    onClickOverlay() {
      this.$emit("update:showUser", false);
    },
    routerPush(url) {
      this.$router.push(url);
    },
    outLogin() {
      const userInfo = storage.get("userInfo");
      this.$store.dispatch(
        "MQTT_CANCEL_TOPIC",
        "mqtt/parking_event/inout" + "/" + userInfo.parkCode
      );
      this.$store.dispatch("MQTT_END");
      this.$store.commit("setOutLogin");
      this.$router.replace("/login");
    },
  },
};
</script>
<template>
  <div class="customUser">
    <van-popup
      v-model="show"
      position="left"
      @click-overlay="onClickOverlay"
      :style="{ width: '70%', height: '100%' }"
    >
      <div class="customUser-content">
        <div class="customUser-content-user">
          <div class="customUser-content-user-left">
            <img src="@/assets/img/login/man.png" alt="" />
            <span>{{ userInfo.tollmanName }}</span>
          </div>
          <div class="customUser-content-user-right">
            {{ userInfo.workStationName }}
            <i class="tc ting-jiantou_zuoyouqiehuan"></i>
          </div>
        </div>
        <van-cell-group>
          <van-cell
            title="订单列表"
            @click="routerPush('/order_list')"
            is-link
          />
          <van-cell title="今日收费" is-link />
          <van-cell title="设置" is-link @click="routerPush('/setting')" />
          <van-cell title="注销登录" @click="outLogin()" is-link />
        </van-cell-group>
      </div>
    </van-popup>
  </div>
</template>

<style scoped lang="scss">
.customUser {
  width: 100%;

  .customUser-content-user {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-weight: bold;
    font-size: 14px;
    padding: 20px 0;
    box-sizing: border-box;

    .customUser-content-user-left {
      display: flex;
      align-items: center;
    }

    img {
      width: 30px;
      margin-right: 10px;
    }
  }
}
</style>
